<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>ES-Module导入和导出</h1>
      <p>关键字：export和import</p>
      <p>exprot---improt { } from ''</p>
      <p>exprot default --- import __ form ''</p>
    </div>
    <script>
      //导出export

      const foo = "es module";
      function hello() {}
      class Person {}
      //单个导出
      //   export { foo };
      //多个导出
      //   export { foo, hello, Person };

      //可以使用as重命名成员导出
      export { foo as fooName, hello as fooHello, Person as fooPerson };

      //导入import
      //单个导入
      //   import {foo} form '路径'
      //多个导入
      //   import {foo, hello, Person} from '路径'
      //多个重命名成员导入
      //   import { fooName, fooHello, fooPerson } from "路径";

      //exprot default导出一个变量(default是一个关键字,默认导出一个变量,再代入的时候可以重新命名)
      export default foo;

      //导入(因为上面使用的是默认导出,所以导入的变量可以重新命名)
      //   import fooName from '路径'
    </script>
  </body>
</html>
